import React, { useState } from 'react'
import ReactEcharts from 'echarts-for-react'



const Navhome = () => {
    const [option,setOption]=useState({
        // title: {
        //   text: 'Rainfall vs Evaporation',
        //   subtext: 'Fake Data'
        // },
        // tooltip: {
        //   trigger: 'axis'
        // },
        // legend: {
        //   data: ['Rainfall', 'Evaporation']
        // },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Rainfall',
            type: 'bar',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'Evaporation',
            type: 'bar',
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ],
            markPoint: {
              data: [
                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      })
    const user = JSON.parse(localStorage.user)
    console.log(user);
    return (
        <div>
            ssac
            <div style={{ width: '100%', height: '150px', display: 'flex', border: '1px solid #eee',}}>
                <div style={{ width: '50%', height: '100%',  display: 'flex' }}>
                    <div style={{
                        display: 'flex', justifContent: 'space-between',
                        alignItems: 'center', height: '100%'
                    }}>
                        <img src={'http://xawn.f3322.net:8002/distremote/static/avatar/' + user.avatar} alt="" style={{ width: '110px', height: '110px', marginLeft: '20px' }} />
                    </div>
                    <div style={{ marginLeft: '20px' }}>
                        <h4 style={{ marginTop: '20px' }}>下午好{user.username},今天又写了几个BUG呢！</h4>
                        <p style={{ marginTop: '20px' }}>{user.deptName}|{user.roleName}</p>
                        <p>上次登录时间{user.lastLoginTime}</p>
                    </div>
                </div>
                <div style={{ width: '50%', height: '100%',  display: 'flex', justifyContent: "flex-end" ,alignItems:'center'}}>
                    <div style={{ width: '70px' }}>
                        <p>今日IP</p>
                        <h3 style={{color:'#1890ff'}}>1</h3>
                    </div>
                    <div style={{ width: '70px' }}>
                        <p>今日访问</p>
                        <h3 style={{color:'#1890ff'}}>390</h3>
                    </div>
                    <div style={{ width: '70px' }}>
                        <p>总访问量</p>
                        <h3 style={{color:'#1890ff'}}>6666</h3>
                    </div>
                </div>
            </div>
            <ReactEcharts option={option} style={{width:'500px',height:'300px'}}>

            </ReactEcharts>
        </div>
    )
}

export default Navhome